<script>
import {defineComponent, h} from "vue";

export default defineComponent({
    name: "MenuIcon",
    props: {
        icon: {
            type: [Function, Object, String],
            default: undefined
        }
    },
    render() {
        if ((typeof this.$props.icon) === "undefined") {
            return null;
        } else if (typeof this.$props.icon === 'string') {
            const node = h('use', {'xlink:href': `#${this.$props.icon?.indexOf('icon-') === 0? this.$props.icon:'icon-' + this.$props.icon}`})
            return h('svg', {'aria-hidden': true}, node);
        } else if (typeof this.$props.icon === 'function') {
            return h(this.$props.icon);
        } else if (typeof this.$props.icon.node === 'function' || typeof this.$props.icon.node === 'object') {
            return h(this.$props.icon.node, this.$props.icon.option);
        } else if (typeof this.$props.icon === 'object' && !this.$props.icon.node) {
            return h(this.$props.icon);
        } else {
            return null;
        }
    }
});
</script>
